﻿@model  List<string>
<li>
    <label>区域分布</label>
    <div class="vocation">
        <select class="select3" name="FirstArea" id="@(ViewBag.firstAreaId)"  onchange="areaChange@(ViewBag.firstAreaId)(this)">
            @foreach (var item in Model)
            {
                <option value="@(item)">@item</option>
            }
        </select>
    </div>
</li>
<li>
    <label>区域名称</label>
    <div class="vocation">
        <select class="select3" id="@(ViewBag.secondAreaId)" name="SecondArea"></select>
    </div>
</li>

<script>
    $(function () {
        areaChange@(ViewBag.firstAreaId)("#@(ViewBag.firstAreaId)")
    })
    ///二级区域加载
    function areaChange@(ViewBag.firstAreaId)(obj) {
        var firstArea = $(obj).find("option:selected").text();
        this.loadData@(ViewBag.firstAreaId)(firstArea);
    }
    //加载
    function loadData@(ViewBag.firstAreaId)(str) { 
        $.post("/common/_GetSecondArea", { firstArea: str }, function (data) {
            if (data.Succeed) {
                var list = data.Obj;
                var strHtml = "";
                list.forEach(function (s) {
                    strHtml += (" <option>" + s + "</option>")
                })
                $('#@(ViewBag.secondAreaId)').html(strHtml);

                var secondArea = $('#@(ViewBag.firstAreaId)').attr('secondArea');
                if (!secondArea || undefined == secondArea) {
                    //firstArea改变后 后一项要改变
                    $('#@(ViewBag.secondAreaId)').find("option").eq(0).attr('selected', true);
                    $('#@(ViewBag.secondAreaId)').prev().find("em:first").text($('#@(ViewBag.secondAreaId)').find("option:selected").text());
                } else {
                    $('#@(ViewBag.secondAreaId)').find("option[value='"+secondArea+"']").eq(0).attr('selected', true);
                    $('#@(ViewBag.secondAreaId)').prev().find("em:first").text($('#@(ViewBag.secondAreaId)').find("option:selected").text());
                }
            }
            else {
                alert(data.Msg);
            }
        }, 'json')
    }

</script>